<template>
  <div :class="['form-radio', disabled ? 'disabled' : '']">
    <el-radio-group v-model="value" :disabled="disabled" size="mini" @change="handleRadioChange">
      <el-radio :label="item.value" v-for="item in dicData" :key="item.id">{{ item.label }}</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    dicData: {
      type: Array,
      default: () => []
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    dicData: {
      handler(val) {},
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleRadioChange(value) {
      this.$emit('change', {
        value,
        x: this.x,
        y: this.y
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.form-radio {
  &.disabled {
    pointer-events: none;
  }
  .el-radio-group {
    .el-radio:last-child {
      margin-right: 30px;
    }
  }
}
</style>
